<!-- eslint-disable vue/valid-v-model -->
<template>
    <div v-loading="pageModel.loading" class="target-page">
        <!-- 搜索表单 -->
        <el-form
            v-if="pageModel.config.showSearchForm"
            ref="searchFormRef"
            :model="pageModel.query"
            :inline="true"
            class="common-search-form"
        >
            <el-form-item prop="date" class="form-item-datepicker">
                <el-date-picker
                    v-model="pageModel.query.date"
                    :editable="false"
                    :clearable="false"
                    :type="pageModel.config.datePicker.type"
                    :placeholder="pageModel.config.datePicker.placeholder"
                    :format="pageModel.config.datePicker.format"
                    :value-format="pageModel.config.datePicker.valueFormat"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="startSearchList"> 查询 </el-button>
                <el-button @click="resetForm"> 重置
</el-button>
            </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <div class="operation-div">
            <div>
                <el-button v-if="pageModel.config.showImportButton" @click="showImportDialog"> 导入数据 </el-button>
                <el-button @click="downloadDataFunc"> 下载 </el-button>
                <el-button @click="showLogsDialog"> 操作日志 </el-button>
            </div>

            <el-button v-if="pageModel.config.showImportButton" @click="createTarget"> 新建目标
</el-button>
        </div>
        <!-- 列表表格 -->
        <xc-table id="xc-table" :data="pageModel.list" :columns="pageModel.config.columns">
            <template #year="{ row }">
                <span>{{ row.year }}年</span>
            </template>
            <template #month="{ row }">
                <span>{{ row.year }}年{{ +row.month }}月</span>
            </template>
            <template #goalSignAmount="{ row }">
                <span>{{ row.goalSignAmount }}</span>
                <el-popover
                    v-if="pageModel.config.canEditAmount"
                    placement="top"
                    width="158px"
                    offset="10"
                    trigger="click"
                    popper-class="edit-goal-popover"
                >
                    <div v-loading="pageModel.editLoading" class="edit-goal-div">
                        <el-row>
                            <el-input-number
                                v-model="row.goalSignAmount"
                                :precision="2"
                                :min="0"
                                :max="9999999"
                                :controls="false"
                            ></el-input-number>
                        </el-row>
                        <el-row>
                            <el-button size="small" @click="closeEditPopover(row)"> 取消 </el-button>
                            <el-button size="small" type="primary" @click="saveGoal(row)"> 保存
</el-button>
                        </el-row>
                    </div>
                    <template #reference>
                        <el-button :id="`popover-${row.id}`" type="text" size="middle">
                            <img src="@/assets/icon_edit@2x.png" width="13" height="12" />
                        </el-button>
                    </template>
                </el-popover>
            </template>
        </xc-table>
        <!-- 汇总信息 -->
        <el-card v-if="pageModel.query.total > 0" class="total-div">
            <p class="total-info" v-html="totalInfoHtml"></p>
            <p v-if="pageModel.config.showTotalTips" class="total-tip">本月签约目标与本年签约目标相互独立，互不包含
</p>
        </el-card>
        <!-- 列表分页 -->
        <Pagination
            v-if="pageModel.query.total > pageModel.query.pageSize"
            :page-no="pageModel.query.pageNum"
            :page-size="pageModel.query.pageSize"
            :total="pageModel.query.total"
            @changePage="changePage"
            @changePageSize="changePageSize"
        ></Pagination>

        <!-- 导入数据弹窗 -->
        <el-dialog
            v-model="pageModel.importDialogVisible"
            width="300px"
            title="导入数据"
            custom-class="import-dialog"
            :before-close="closeImportDialog"
        >
            <div v-loading="pageModel.importLoading">
                <el-form ref="uploadFormRef" class="upload-form">
                    <el-form-item>
                        <el-button type="primary" class="import-button" @click="downloadTemplateFunc">
                            <img src="@/assets/icon_download@2x.png" width="13" height="14" style="margin-right: 5px" />
                            <span>下载{{ downloadTemplateSet[pageModel.query.type] }}模板</span>
                        </el-button>
                        <el-upload
                            ref="uploadRef"
                            class="upload-demo"
                            :limit="1"
                            :http-request="httpRequest"
                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,text/csv"
                            action=""
                        >
                            <el-button type="primary" class="import-button">
                                <img
                                    src="@/assets/icon_upload@2x.png"
                                    width="13"
                                    height="14"
                                    style="margin-right: 5px"
                                />
                                <span>上传{{ downloadTemplateSet[pageModel.query.type] }}文件</span>
                            </el-button>
                            <template #tip>
                                <p class="upload-tips-text">支持csv、xls等excel文件
</p>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>

        <!-- 日志列表弹窗 -->
        <el-dialog
            v-model="pageModel.logsDialogVisible"
            width="60%"
            title="操作日志"
            custom-class="logs-dialog"
            :before-close="closeLogsDialog"
        >
            <!-- 日志表格 -->
            <xc-table
                max-height="380px"
                :data="pageModel.logs"
                :columns="pageModel.logsColumns"
                :loading="pageModel.logsLoading"
            >
                <template #file="{ row }">
                    <a v-if="row.file && row.file.length > 0" :href="row.file" target="_blank">查看附件</a>
                </template>
            </xc-table>
            <!-- 日志列表分页 -->
            <Pagination
                v-if="pageModel.logsPagination.total > pageModel.logsPagination.pageSize"
                :page-no="pageModel.logsPagination.pageNum"
                :page-size="pageModel.logsPagination.pageSize"
                :total="pageModel.logsPagination.total"
                @changePage="changeLogsPage"
                @changePageSize="changeLogsPageSize"
            ></Pagination>
        </el-dialog>
        <!-- 新建目标弹窗 -->
        <el-dialog
            v-model="pageModel.targetDialogVisible"
            width="40%"
            title="新建目标"
            :before-close="closeTargetDialog"
        >
            <el-form
                ref="ruleFormRef"
                :model="pageModel.targetForm"
                :rules="addTargetRulesData"
                :inline="false"
                label-width="120px"
                label-position="top"
            >
                <el-form-item label="新建员工:" prop="userCode">
                    <el-select v-model="pageModel.targetForm.userCode" filterable placeholder="请选择新建员工">
                        <el-option
                            v-for="item in options"
                            :key="item.userNo"
                            :label="item.userName"
                            :value="item.userNo"
                            :disabled="!item.userState"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="+pageModel.query.type === 1" label="全年签约目标:" prop="goalSignAmount">
                    <el-input
                        v-model="pageModel.targetForm.goalSignAmount"
                        type="number"
                        :maxlength="20"
                        placeholder="请输入全年签约目标"
                    />
                </el-form-item>
                <el-form-item v-if="+pageModel.query.type === 2" label="全月签约目标:" prop="goalSignMouthAmount">
                    <el-input
                        v-model="pageModel.targetForm.goalSignMouthAmount"
                        type="number"
                        :maxlength="20"
                        placeholder="请输入全月签约目标"
                    />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="pageModel.targetDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, defineProps, watch, nextTick, computed } from 'vue';
import {
    searchTargets,
    editGoal,
    importTargets,
    downloadTemplate,
    downloadData,
    getLogs,
    getTotals,
    userList,
    addGoal,
} from '@/api/targetManage';
import { setTableMaxHeight, getFormatDate, getSuffix } from '@/utils/common';
import { TargetPage, TargetPagesConfig, TargetItem, TargetLogItem } from './ModelDefines';
import { addTargetRules } from './rules';
import { ElMessageBox, FormInstance, UploadInstance, FormRules } from 'element-plus';
import { Upload } from '@x-tech/fe-puma-lib-upload';
import { ElMessage } from 'element-plus';
import { useStore } from 'vuex';
import Pagination from '@/components/Pagination.vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/index.vue';

const props = defineProps({
    targetType: {
        type: String,
        default: '',
    },
});

const uploadFormRef: any = ref<FormInstance>();
const uploadRef: any = ref<UploadInstance>();

const maxTableHeight = ref(0);
const totalInfoHtml = ref('');
const options = ref([]);
const loading = ref(false);

// 页面model
const pageModel = reactive(new TargetPage());
const ruleFormRef = ref<FormInstance>();
const addTargetRulesData = reactive<FormRules>(addTargetRules);
const downloadTemplateSet = reactive({
    '1': '全年业绩',
    '2': '本月业绩',
    '3': '回款',
    '4': '全年上刊',
    '5': '本月上刊',
});

// 加盟商编码（登录时已保存）
const store = useStore();
const groupCodeRef = computed(() => store.state.userGroup.groupCode || '');
pageModel.query.groupCode = groupCodeRef.value;
pageModel.userSearch.departCode = groupCodeRef.value;
pageModel.targetForm.joinTraderCode = groupCodeRef.value;
// 用户工号（登录时已保存）
const userCodeRef = computed(() => store.state.puma.user.code || '');
pageModel.query.userCode = userCodeRef.value;

onMounted(async () => {
    await nextTick();
    maxTableHeight.value = setTableMaxHeight('xc-table') - 20;
    startSearchList();
});

// 监听tab改变，更新相应数据
watch(
    () => props.targetType,
    (targetType) => {
        pageModel.query.type = targetType;
        pageModel.userSearch.goalType = +targetType === 1 ? 0 : 1;
        pageModel.query.date = getFormatDate('', 'YYYY-mm-dd'); // 日期重置成默认

        if (+targetType === 1) {
            pageModel.config = TargetPagesConfig.yearlyPerformance;
        } else if (+targetType === 2) {
            pageModel.config = TargetPagesConfig.monthlyPerformance;
        } else if (+targetType === 3) {
            pageModel.config = TargetPagesConfig.backPayment;
        } else if (+targetType === 4) {
            pageModel.config = TargetPagesConfig.yearlyPublish;
        } else if (+targetType === 5) {
            pageModel.config = TargetPagesConfig.monthlyPublish;
        }
        updateTotalInfo(null);
        startSearchList();
    }
);

/* 列表数据 **/

// 搜索列表数据
const startSearchList = async (): Promise<void> => {
    pageModel.query.pageNum = 1;
    await searchList();
    await getTotalInfo();
};
const createTarget = () => {
    pageModel.targetDialogVisible = true;
    pageModel.targetForm.userCode = '';
    pageModel.targetForm.goalSignAmount = '';
    remoteMethod('');
};

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) {
        return;
    }
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            pageModel.targetForm.year = new Date(pageModel.query.date).getFullYear().toString();
            pageModel.targetForm.month = (new Date(pageModel.query.date).getMonth() + 1).toString();
            const data = await addGoal(pageModel.query.type, pageModel.targetForm);
            if (data.code !== '200') {
                ElMessage.error(data.msg);
            } else {
                pageModel.targetDialogVisible = false;
                ElMessage.success(data.msg);
                await searchList();
            }
        } else {
            console.log('error submit!', fields);
        }
    });
};
const remoteMethod = async (query: string): Promise<void> => {
    loading.value = true;
    pageModel.userSearch.name = query;
    pageModel.userSearch.year = new Date(pageModel.query.date).getFullYear().toString();
    pageModel.userSearch.month =
        +pageModel.userSearch.goalType === 1 ? (new Date(pageModel.query.date).getMonth() + 1).toString() : '';
    const data = await userList(pageModel.userSearch);
    loading.value = false;
    options.value = data.list;
};
const closeTargetDialog = () => {
    pageModel.targetDialogVisible = false;
};
// 搜索列表数据
const searchList = async (): Promise<void> => {
    pageModel.loading = true;
    try {
        pageModel.list = [];
        const data = await searchTargets(pageModel.query);
        if (data) {
            if (data.list) {
                data.list.forEach((element: any) => {
                    const item = handleTargetItem(element);
                    pageModel.list.push(item);
                });
            }
            if (data.total !== undefined) {
                pageModel.query.total = data.total;
            }
        } else {
            pageModel.query.total = 0;
        }
    } finally {
        pageModel.loading = false;
    }
};

const handleTargetItem = (element: any): TargetItem => {
    const item: TargetItem = element;
    // 这里需要做一下字段转换（不同tab 的接口和返回的字段名不一样），在html 中就用统一的字段了

    // 全年业绩
    if (element.annual !== undefined) {
        item.year = element.annual;
    }
    if (element.annualResultsId !== undefined) {
        item.id = element.annualResultsId;
    }
    if (element.annualSigningTargets !== undefined) {
        item.goalSignAmount = element.annualSigningTargets;
    }
    if (element.actualAnnualSign !== undefined) {
        item.actualSignAmount = element.actualAnnualSign;
    }

    // 本月业绩
    if (element.monthlyResultsId !== undefined) {
        item.id = element.monthlyResultsId;
    }
    if (element.monthlySigningTargets !== undefined) {
        item.goalSignAmount = element.monthlySigningTargets;
    }
    if (element.monthlyAnnualSign !== undefined) {
        item.actualSignAmount = element.monthlyAnnualSign;
    }

    // 回款
    if (element.userNo !== undefined) {
        item.userCode = element.userNo;
    }
    if (element.actualContract !== undefined) {
        item.goalSignAmount = element.actualContract;
    }
    if (element.receivableMoney !== undefined) {
        item.actualSignAmount = element.receivableMoney;
    }
    // 回款完成率：已回款 / 实际签约

    // 上刊
    if (element.actualPublished !== undefined) {
        item.actualSignAmount = element.actualPublished;
    }

    // 前端计算完成率
    if (item.goalSignAmount) {
        if (item.actualSignAmount) {
            const rate = (item.actualSignAmount / item.goalSignAmount) * 100;
            // 通过取模来判断是否能整除
            if (item.actualSignAmount % item.goalSignAmount === 0) {
                // 整数，直接显示 50%
                item.finishRate = rate.toFixed(0) + '%';
            } else {
                // 不能整除，显示小数点后2位 50.68%
                item.finishRate = rate.toFixed(2) + '%';
            }
        } else {
            item.finishRate = '0%';
        }
    }
    return item;
};

// 获取汇总信息
const getTotalInfo = async (): Promise<void> => {
    try {
        // 这里的返回数据是这样的，两层 data
        //
        // {
        //     "code": 0,
        //     "data": {
        //         "msg": "操作成功",
        //         "code": "200",
        //         "data": {
        //             "targetAmount": 9842.66,
        //             "actualAmount": 160.00,
        //             "ratio": 0.02
        //         },
        //         "success": true
        //     },
        //     "message": "操作成功！"
        // }
        //
        const data = await getTotals(pageModel.query);
        if (data) {
            // 全年业绩和本月业绩，返回的是2层data的数据（后面需要修改成1层）
            if (data.data) {
                updateTotalInfo(data.data);
            } else {
                // 后面的回款和上刊，就是1层data
                updateTotalInfo(data);
            }
        } else {
            updateTotalInfo(null);
        }
    } catch {
        updateTotalInfo(null);
    }
};

const updateTotalInfo = (data: any) => {
    let totalInfo = pageModel.config.totalInfo;
    if (data) {
        // 这里每种tab统计接口返回的字段不一样
        if (data.targetAmount !== undefined) {
            totalInfo = totalInfo.replace('#GOAL#', data.targetAmount + '');
        }
        if (data.actualAmount !== undefined) {
            totalInfo = totalInfo.replace('#ACTUAL#', data.actualAmount + '');
        }
        if (data.totalReceivable !== undefined) {
            totalInfo = totalInfo.replace('#GOAL#', data.totalReceivable + '');
        }
        if (data.totalActualSign !== undefined) {
            totalInfo = totalInfo.replace('#ACTUAL#', data.totalActualSign + '');
        }
        if (data.totalActualPublished !== undefined) {
            totalInfo = totalInfo.replace('#ACTUAL#', data.totalActualPublished + '');
        }
        if (data.ratio !== undefined) {
            let rate = data.ratio + '';
            if (rate.length <= 4 || rate.indexOf('.') === -1) {
                // 整数，直接显示 50%
                rate = (data.ratio * 100).toFixed(0) + '%';
            } else {
                // 不能整除，显示小数点后2位 50.68%
                rate = (data.ratio * 100).toFixed(2) + '%';
            }
            totalInfo = totalInfo.replace('#RATE#', rate);
        }
    } else {
        totalInfo = totalInfo.replace('#GOAL#', '-');
        totalInfo = totalInfo.replace('#ACTUAL#', '-');
        totalInfo = totalInfo.replace('#RATE#', '-');
    }
    totalInfoHtml.value = totalInfo;
};

// 重置搜索表单
const resetForm = () => {
    pageModel.query.date = getFormatDate('', 'YYYY-mm-dd'), // 默认当前日期
    startSearchList();
};

// 分页的页码改变
const changePage = (page: number) => {
    pageModel.query.pageNum = page;
    searchList();
};

// 分页的条数改变
const changePageSize = (pageSize: number) => {
    pageModel.query.pageSize = pageSize;
    searchList();
};

/* 修改目标 **/

// 关闭修改目标弹窗
const closeEditPopover = (item: TargetItem) => {
    const elId = 'popover-' + item.id;
    const el = document.getElementById(elId);
    if (el) {
        el.click();
    }
};

// 保存目标
const saveGoal = async (item: TargetItem): Promise<void> => {
    pageModel.editLoading = true;
    try {
        await editGoal(pageModel.query.type, item);
        closeEditPopover(item);
        await searchList();
        await getTotalInfo();
    } finally {
        pageModel.editLoading = false;
    }
};

/* 导入数据 **/

// 显示导入数据弹窗
const showImportDialog = () => {
    pageModel.importDialogVisible = true;
};

// 关闭导入数据弹窗
const closeImportDialog = () => {
    pageModel.importDialogVisible = false;
    uploadFormRef.value.resetFields();
    uploadRef.value.clearFiles();
};

// 下载模板
const downloadTemplateFunc = async (): Promise<void> => {
    pageModel.importLoading = true;
    try {
        const resp = await downloadTemplate(pageModel.query.type);
        closeImportDialog();
        if (resp.value) {
            window.open(resp.value);
        }
    } finally {
        pageModel.importLoading = false;
    }
};

// 上传文件
const httpRequest = async (rawFile: any): Promise<void> => {
    pageModel.fileObsUrl = '';
    pageModel.importLoading = true;

    try {
        await obsUpload(rawFile.file);

        if (pageModel.fileObsUrl.length === 0) {
            pageModel.importLoading = false;
            return Promise.reject();
        }

        const params: Object = {
            fileUrl: pageModel.fileObsUrl,
        };
        const resp = await importTargets(pageModel.query.type, params);
        pageModel.importLoading = false;
        uploadRef.value.clearFiles();

        if (resp) {
            if (resp.code === 200) {
                closeImportDialog();
                await startSearchList();
                ElMessage.success('导入成功，已刷新列表');
            } else {
                const hasFile: boolean = resp.fileUrl && resp.fileUrl.length > 0;
                ElMessageBox.alert(resp.desc, '', {
                    confirmButtonText: hasFile ? '下载文件' : '确定',
                })
                    .then((data) => {
                        if (hasFile) {
                            window.open(resp.fileUrl);
                        }
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        }
    } catch (error) {
        pageModel.importLoading = false;
    }
};

// OBS上传文件
const obsUpload = async (file: any): Promise<void> => {
    const suffix = getSuffix(file.name);
    if (!pageModel.limitTypes.includes(suffix)) {
        ElMessage.info('请上传正确的excel格式文件');
        uploadRef.value.clearFiles();
        return Promise.reject();
    }

    let upl: any = null;
    if (window.XCConfig.VITE_ENV === 'prod') {
        // 这里关于环境的判断，各项目跟据自身情况修改
        upl = Upload.createProdUpload();
    } else if (window.XCConfig.VITE_ENV === 'test') {
        upl = Upload.createTestUpload();
    } else if (window.XCConfig.VITE_ENV === 'pre') {
        upl = Upload.createPreUpload();
    } else {
        upl = Upload.createDevUpload();
    }

    return upl
        .upload(file)
        .then((url: any): void => {
            if (url) {
                pageModel.fileObsUrl = url;
            } else {
                ElMessage.error('上传失败');
            }
        })
        .catch((e: any) => {
            ElMessage.error('上传失败');
        });
};

/* 下载数据 **/

// 下载表格数据
const downloadDataFunc = async (): Promise<void> => {
    pageModel.loading = true;
    try {
        const resp = await downloadData(pageModel.query);
        if (resp) {
            if (resp.fileUrl) {
                window.open(resp.fileUrl);
            } else {
                ElMessage.error('没有可供下载数据');
            }
        } else {
            ElMessage.error('没有可供下载数据');
        }
    } finally {
        pageModel.loading = false;
    }
};

/* 操作日志 **/

// 显示操作日志弹窗
const showLogsDialog = async (): Promise<void> => {
    pageModel.logsDialogVisible = true;
    getLogsFunc();
};

// 关闭操作日志弹窗
const closeLogsDialog = () => {
    pageModel.logsDialogVisible = false;
};

// 获取操作日志
const getLogsFunc = async (): Promise<void> => {
    pageModel.logsLoading = true;
    try {
        pageModel.logs = [];

        const data = await getLogs(pageModel.logsPagination, pageModel.query);
        if (data) {
            if (data.list) {
                data.list.forEach((element: any) => {
                    const item: TargetLogItem = element;
                    // 字段转换
                    if (element.operationTime) {
                        item.date = getFormatDate(element.operationTime, 'YYYY/mm/dd HH:MM:SS');
                    }
                    if (element.operationUserName) {
                        item.operator = element.operationUserName;
                    }
                    if (element.details) {
                        item.content = element.details;
                    }
                    if (element.attachmentUrl) {
                        item.file = element.attachmentUrl;
                        const components = element.attachmentUrl.split('/');
                        if (components.length > 0) {
                            item.fileName = components[components.length - 1];
                        }
                    }
                    pageModel.logs.push(item);
                });
            }
            if (data.total !== undefined) {
                pageModel.logsPagination.total = data.total;
            }
        } else {
            pageModel.logsPagination.total = 0;
        }
    } finally {
        pageModel.logsLoading = false;
    }
};

// 日志列表分页的页码改变
const changeLogsPage = (page: number) => {
    pageModel.logsPagination.pageNum = page;
    getLogsFunc();
};

// 日志列表分页的条数改变
const changeLogsPageSize = (pageSize: number) => {
    pageModel.logsPagination.pageSize = pageSize;
    getLogsFunc();
};
</script>

<style lang="scss">
.edit-goal-popover {
    padding: 20px;
    .edit-goal-div {
        .el-row {
            display: block;
            text-align: right;
        }
        .el-input-number {
            width: 100%;
        }
        .el-input__inner {
            text-align: left;
        }
        .el-button {
            margin-top: 10px;
            min-width: 50px;
        }
        .el-button + .el-button {
            margin-left: 10px;
        }
    }
}
</style>

<style lang="scss" scoped>
.target-page {
    :deep(.el-table td.el-table__cell .el-button) {
        border: none;
        padding: 5px 10px 8px 10px;
        min-width: auto;
    }
    :deep(.el-table tr:last-child td.el-table__cell) {
        border-bottom: none;
    }
    :deep(.el-card__body) {
        padding: 14px 20px;
    }
    .common-search-form {
        :deep(.el-form-item) {
            margin-right: 0px;
        }
        :deep(.el-button) {
            margin-left: 16px;
        }
        :deep(.el-form-item.form-item-datepicker .el-date-editor.el-input) {
            height: 36px;
        }
        :deep(.el-form-item.form-item-datepicker .el-date-editor.el-input .el-input__inner) {
            padding-left: 12px;
        }
        :deep(.el-form-item.form-item-datepicker .el-date-editor.el-input .el-input__prefix) {
            left: unset;
            right: 12px;
        }
        :deep(.el-input__inner) {
            width: 100%;
        }
    }
    .operation-div {
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        .el-button + .el-button {
            margin-left: 16px;
        }
    }
    .total-div {
        .total-info {
            font-size: 14px;
            color: #252525;
            margin: 0;
            :deep(span) {
                color: #e60044;
            }
        }
        .total-tip {
            font-size: 14px;
            color: #999999;
            margin: 0;
            margin-top: 10px;
        }
    }
    .logs-dialog a {
        color: #4d88ff;
        font-size: 14px;
        text-decoration: none;
    }
    :deep(.import-dialog .el-dialog__body) {
        text-align: center;
        padding-top: 25px;
    }
    :deep(.import-dialog .import-button:last-child) {
        margin-top: 30px;
        margin-bottom: 29px;
    }
    :deep(.import-dialog .upload-form .el-form-item) {
        margin-bottom: 0;
    }
    :deep(.import-dialog .upload-form .el-form-item__content) {
        display: block;
    }
    :deep(.import-dialog .el-upload) {
        margin-top: 20px;
    }
    :deep(.import-dialog .upload-tips-text) {
        padding: 0;
        margin: 0;
        margin-top: 10px;
        font-size: 12px;
        color: #999999;
        line-height: normal;
    }
    :deep(.el-table__empty-block) {
        height: 250px !important;
    }

    :deep(.el-table__body) {
        .xc-table-column {
            height: 52px !important;
            ._cell {
                padding-top: 0;
                padding-bottom: 0;
            }
        }
    }
}
</style>
